<template>
  <div>
    姓名: <input type="text" v-model="form.name"><br>
    年龄: <input type="text" v-model="form.age"><br>
    性别:
    <select v-model="form.gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select><br>
    <button @click="add">添加</button>
    <button @click="modify">修改</button>
    <br>
    <table border>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in arr" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <button @click="del(item.id)">删除</button>&nbsp;
            <button @click="edit(item.id)">编辑</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: 11, name: 'Tom', gender: '男', age: 19 },
        { id: 22, name: 'Jone', gender: '女', age: 21 },
      ],
     form:{ 
      name:'',
      gender:'',
      age:''
      }
    }
  },
  methods:{
    add(){
      //1.当用户点击添加时先做非空效验
      // 三个变量任意一个是空都不能通过
      const {name,age,gender} = this.form
      if(this.name===''|| this.gender || this.age==='') return alert('请输入数据')
      // 2.添加将三个对象组成数据，加入到数组里 
      this.arr.push({
         name,
         age,
         gender,
         id:Date.now()
      })
    //  3.清空表单
      this.form ={
         name:'',
        gender:'',
         age:''
      }
    },
    // 点击编辑按钮，通过id 找到对象 用变量接收  
    edit(id) {
      const obj = this.arr.find(item => item.id === id)
      // 把对象里的数据赋值给三个变量完成数据回显
      this.form = {...obj}
    },
    modify(){
      // 1.找到当前要修改的数据 id 
      const id = this.form.id
      // 2.根据id 找到对应的数据 
      const obj = this.arr.find(item =>item.id === id)
      // 3.修改数据 
      //obj 和arr 数组中的tom 对象指向的同一个地址，所以修改会影响数组中的tom
      obj.name=this.form.name
      obj.age = this.form.age
      obj.gender = this.form.gender
  //  你改的obj 变量的值，和arr数组中的tom 对象没有关系
  //  obj ={...this.form}
      this.form={
        name:'',
        age:'',
        gender:'',
        id:''
      }
    },
    del(id){
      // 根据id 找到下标 
      const index = this.arr.findIndex(item =>item.id === id)
      // 根据下标删除数据 
      this.arr.splice(index,1)
    }
  }
}
</script>

<style scoped>
table {
  /* border: 1px solid black; */
  border-collapse: collapse;
}
td, th {
  padding: 10px;
}
</style>
